<template>
  <div class="view-wrapper">
    <div class="bridgeCardDetail">
      <div class="bt">会员概览</div>
      <div class="overview ">
        <div class="list bg_1">
          <img src="@/static/mender-1.png" alt="">
          <div class="txtBox">
            <p class="p1">会员</p>
            <p class="p2">{{menderData.menbers}}</p>
          </div>
        </div>
        <div class="list bg_2">
          <img src="@/static/mender-2.png" alt="">
          <div class="txtBox">
            <p class="p1">激活会员</p>
            <p class="p2">{{menderData.usedMenbers}}</p>
          </div>
        </div>
        <div class="list bg_3">
          <img src="@/static/mender-3.png" alt="">
          <div class="txtBox">
            <p class="p1">已用完会员</p>
            <p class="p2">{{menderData.usedUp}}</p>
          </div>
        </div>
        <div class="list bg_4">
          <img src="@/static/mender-4.png" alt="">
          <div class="txtBox">
            <p class="p1">监管金额</p>
            <p class="p2">{{menderData.superviseMoney}}</p>
          </div>
        </div>
      </div>
      <div class="bt">会员领取卡</div>
      <div class="receive">
        <div class="lable">方式一：领卡URL：</div>
        <div class="url"><img :src="menderData.receiveCardUrl" alt=""></div>
      </div>
      <div class="bt">会员列表</div>
      <div class="head">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="会员手机号：">
            <el-input
              v-model="formInline.phone"
              placeholder="请输入会员手机号"
            ></el-input>
          </el-form-item>
          <el-form-item label="会员名称：">
            <el-input
              v-model="formInline.name"
              placeholder="请输入会员名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="激活状态：">
            <el-select v-model="formInline.status" placeholder="请选择">
              <el-option
                v-for="item in statusType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="来源：">
            <el-select v-model="formInline.source" placeholder="请选择">
              <el-option
                v-for="item in sourceType"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="search">查询</el-button>
            <el-button @click="reset">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="listBox">
        <div class="add">
          <div class="left">
            <el-upload
              class="upload-demo"
              :action="fileaction"
              :headers="headers"
              :data="fileData"
              :limit="1"
              :on-success="handleFileChange">
              
              <!-- :file-list="fileList" -->
              <el-button type="primary">表格导入</el-button>
              <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
            <el-button type="warning" @click="addMender">新增会员</el-button>
            <export-excel-button
              title="会员列表"
              action="/asset/card/weal/user/list/export"
              :params="ExportParams"
            />
            <el-button @click="handledownload" type="text">导入模板.xls</el-button>
          </div>
          <div class="right">
            <div class="lable">排序：</div>
            <el-select v-model="formInline.sortType" placeholder="请选择" @change="handleSort">
              <el-option
                v-for="item in sortTypeList"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <ex-table
          ref="table"
          :loading="loading"
          :table-column="tableColumn"
          :table-data="tableData"
          @pageSizeChange="handleSizeChange"
          @currentPageChange="handleCurrentChange"
        >
          <template v-slot:operate="{ scope }">
            <el-button @click="handleEdit(scope.row)" type="primary">编辑</el-button>
            <el-button @click="handleDetele(scope.row.id)"  type="danger">删除</el-button>
          </template>
        </ex-table>
      </div>
    </div>
    <detail-dialog
      ref="childRef"
      :assetId="formInline.assetId"
      v-if="detailDialog"
      :visible.sync="detailDialog"
      @success="_handleSuccess"
    />
  </div>
</template>
<script>
// components

import { userList,addUserLists,getMenderDetail} from "@/api/bridgeCard";
import { getToken } from '@/utils/auth'
import imgDetailDialog from './components/imgDetailDialog' 
import handlePageMixin from "@/mixins/handlePageMixin";
import DetailDialog from './lookMembers/DetailDialog'
import ExportExcelButton from "@/components/ExportExcelButton/index";

export default {
  //   name: "",
  components: {
    DetailDialog,
    ExportExcelButton
  },
  mixins: [handlePageMixin],
  data() {
    return {
      detailDialog: false,
      loading: true,
      fileaction: process.env.VUE_APP_BASE_API + "/asset/card/weal/user/importData",
      fileData: {
        assetId: ''
      },
      headers: {},//设置上传文件请求头
      formInline:{
        assetId: '',
        phone: '',
        name: '',
        source: '',
        status: '',
        sortType: '1',
      },
      statusType: [
        {id: '',value: '全部'},
        {id: '1',value: '未激活'},
        {id: '2',value: '激活'},
      ],
      sourceType:[
        {id: '',value: '全部'},
        {id: '1',value: '会员导入'},
      ],
      sortTypeList: [
        {id: '1',value: '卡余额升序'},
        {id: '2',value: '卡余额降序'},
      ],
      paramList: [],
      menderData: {},
      tableData: [],
      tableColumn: [
        { prop: "phone", label: "会员手机号" },
        { prop: "name", label: "会员名字" },
        { prop: "statusDict", label: "激活状态" },
        { prop: "cardId", label: "卡号ID" },
        { prop: "balanceMoney", label: "卡余额（¥）" },
        { prop: "sourceDict", label: "来源", width: 120 },
      ],
    };
  },
  created() {
    this.formInline.assetId = this.$route.query.assetId
    this.fileData.assetId = this.$route.query.assetId
    this.headers ={'X-Access-Token' : getToken() || ''}
    this.getMenderDetail()
    this.getList()
  },
  computed: {
    ExportParams() {
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      return params;
    },
  },
  methods: {
    //查看会员概括
    getMenderDetail(){
      var data = {
        assetId: this.formInline.assetId
      }
      
      getMenderDetail(data).then((res) => {
        console.log('res',res)
        this.menderData = res.result
      })
      .finally(() => {
        this.loading = false;
      });
    },
    getList() {
      //商家列表
      const params = {
        ...this.pageOptions,
        ...this.formInline,
      };
      this.loading = true;
      userList(params).then((res) => {
        const { total, records } = res.result;
        this.tableData = records;
        this.$refs.table.pageOptions.total = total;
      })
      .finally(() => {
        this.loading = false;
      });
    },
    search() {
      //搜索
      console.log(this.formInline);

      this.pageOptions.pageNum = 1;
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    reset() {
      //重置
      this.formInline.phone = '';
      this.formInline.name = '';
      this.formInline.phone = '';
      this.formInline.source = '';
      this.formInline.status = '';
      this.$refs.table.pageOptions.pageNum = 1;
      this.getList();
    },
    //导入文件
    handleFileChange(res, file) {
      console.log('文件',res)
      var content = ''
      var type = ''
      var title = ''
      if(res.code == 200){
        content =  ''
        type = 'success'
        title = '导入成功'
        this.paramList = res.result
        this.addMenders()
       
      }else{
         content = res.message
         type = 'error'
         title = '导入失败'
      }
      this.$alert(content, title, {
          confirmButtonText: '确定',
          type: type,
          center: true,
          callback: action => {
            
          }
        });
    },
    //批量新增会员
    addMenders(){
      var data = {
        assetId: this.formInline.assetId,
        paramList: this.paramList
      }
      addUserLists(data).then((res) => {
        const { total, records } = res.result;
        this.getList()
      })
      .finally(() => {
        this.loading = false;
      });
    },
    //新增单个会员
    addMender(){
      this.detailDialog = true
    },
    _handleSuccess(data) {
      console.log("data", data);
      this.pageOptions.pageNum = 1
      this.$refs.table.pageOptions.pageNum = 1
      this.getList();
    },
    handleAdd(){

    },
    //下载模板
    handledownload(){
      location.href = 'https://www.milianmeng.net/group1/M00/00/3A/rBAAB2Hg5emAUtvsAAAisHvBBo053.xlsx'
    },
    //排序
    handleSort(){
      console.log('11111111111')
      this.getList();
    },
  },
};
</script>
<style lang="scss" scoped>
.bridgeCardDetail{
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
}
.bt{
  width: 120px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid #1890ff;
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin-bottom: 30px;
}
.overview{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  .bg_1{
    background: #FFF9EC;
  }
  .bg_2{
    background: #FFF4EB;
  }
  .bg_3{
    background: #F3F7FB;
  }
  .bg_4{
    background: #F5F7FF;
  }
  .list{
    flex: 1;
    height: 120px;
    border-radius: 4px;
    box-sizing: border-box;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    margin-left: 14px;
    img{
      width: 66px;
      height: 66px;
      border-radius: 50%;
    }
    .txtBox{
      display: flex;
      flex-direction: column;
      margin-left: 14px;
      padding-top: 10px;
      .p1{
        font-size: 14px;
        color: #999;
      }
      .p2{
        font-size: 24px;
        color: #333;
        font-weight: 500;
        margin-top: 8px;
      }
    }
  }
  
}
.receive{
  margin: 20px;
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  .lable{
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}
.head {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px 0;
}
.el-form--inline .el-form-item {
  margin-right: 40px;
  display: inline-block !important;
}
.listBox {
  box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
  background-color: #fff;
  border-radius: 8px;
  //   height: 120px;
  padding: 20px 20px;
  margin-top: 10px;
  .add{
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .upload-demo{
      display: inline-block;
      margin-right: 10px;
    }
    .left{
      align-items: flex-start;
      display: flex;
    }
    .right{
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
}
</style>
